<!-- 添加患者文书 -->
<template>
    <div class='addpatient-page pd pm10'>
        <div class=" pt10">
            <n-button type="success" @click="addRow" v-if="templateTtpe==1">添加一行</n-button>
            <n-button type="success" @click="baocun" class="ml10 " :loading="isload">保存</n-button>
            <n-button type="success" @click="daying" class="ml10 ">打印</n-button>
        </div>
        <div ref="daykkjer">

            <div :style="{height: titleBox.initH+'px'}" class="titlecenter" v-if="titleBox">
                <span class="textcontext" v-for="(item,idx) in titleBox.initData" :key="idx" :style="fontStle(item)">
                    {{item.val}}
                </span>
            </div>
            <table class="writTable w100" cellpadding="0" cellspacing="0">
                <thead v-if="writTablethead">
                    <tr class="writTablethead">
                        <div class="theadcentext" :style="{height: writTablethead.initH+'px'}">
                            <template v-for="(item,idx) in writTablethead.initData" :key="idx">
                                <textarea v-if="item.typeid==0" readonly class="kjnmkjser" v-model='item.val'
                                    :style="fontStle(item)"></textarea>
                                <input placeholder="文本内容" class="kjnmkjser" v-model='item.val' v-if="item.typeid == 1"
                                    :style="fontStle(item)" />
                            </template>
                        </div>
                    </tr>
                </thead>
                <tbody class="writTabletbody">
                    <tr class="writTablethead">
                        <div class="tbodycentext" :class="templateTtpe=='1'?'act':''" :style="{height:rowHeight+'px'}"
                            v-for="(iyte,ijr) in bodyRowd" :key="ijr">
                            <i class="iconfont dx-shanchu red dfsdtrteer" @click="delrow (ijr)"></i>
                            <template v-for="(item,idx) in iyte.initData" :key="idx">
                                <div v-if="item.typeid == 1">
                                    <div v-if="item.textType=='1'" class="kjnmkjser" :style="fontStle(item)">
                                        <n-date-picker v-model:value="item.val" type="date" />
                                    </div>
                                    <div v-else-if="item.textType=='2'" class="kjnmkjser" :style="fontStle(item)">
                                        <n-time-picker v-model:value="item.val" />
                                    </div>
                                    <input v-else placeholder="文本内容" class="kjnmkjser" v-model='item.val'
                                        :style="fontStle(item)" />
                                </div>
                                <div v-if="item.typeid==2" class="kjnmkjser sz vertical-center" :style="ImgStle(item)"
                                    @click="uppupqm(item)">
                                    <span class="fz12 z9 " v-if="!item.val">点击签名</span>
                                    <img :src="item.val" class="w100 h100" v-else />
                                </div>


                                <n-checkbox-group class="kjnmkjser" v-if="item.typeid ==4" :style="fontStle(item)">
                                    <n-space item-style="display: flex;">
                                        <n-checkbox :value="ites" :label="ites"
                                            v-for="(ites,idx) in item.option.split(',')" />
                                    </n-space>
                                </n-checkbox-group>
                                <n-checkbox-group v-model:value='item.val' class="kjnmkjser" v-if="item.typeid ==4" :style="fontStle(item)">
                                    <n-space item-style="display: flex;">
                                        <n-checkbox :value="ites" :label="ites"
                                            v-for="(ites,idx) in item.option.split(',')" />
                                    </n-space>
                                </n-checkbox-group>

                                <n-radio-group v-model:value='item.val' class="kjnmkjser" v-if="item.typeid ==5" :style="fontStle(item)">
                                  
                                    <n-space>
                                        <n-radio :value="ites" :label="ites"
                                            v-for="(ites,idx) in item.option.split(',')">
                                            {{ites}}
                                        </n-radio>
                                    </n-space>
                                </n-radio-group>
                            </template>
                        </div>
                        <div v-if="tbodyloading" class="cen pt20 z9">
                            <n-spin size="medium" /> 正在加载中...
                        </div>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="kjnkjsertwer vertical-center" v-if="showModal">
            <signature @hidePup="showModal=false" @updataImg="updataImgqm"></signature>
        </div>
        <n-modal v-model:show="showModaler" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>点击选择签名 </div>
            </template>
            <div class="SelectTheSignature">
                <div class="lisyuhghnuwe vertical-center sz" @click="showModal = true;showModaler=false">
                    点击上传签名
                </div>
                <div class="lisyuhghnuwe sz" v-for="item in imgListe" @click="xzpupcall(item)">
                    <img :src="item.url" />
                    <i class="dx-shanchu red sz iconfont sdfsdfdsrtt" @click.stop="delectImg(item)"></i>
                </div>

            </div>
            <template #action>
                <div class="tr">
                    <n-button> 取消 </n-button>
                </div>
            </template>
        </n-modal>





    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue";
import { dxpost, callBack, qurl, dxget, fontStle, ImgStle, checkboxtle } from "../../util/index";
import signature from "../../components/util/signature.vue";
import Print from "../../util/print";
const daykkjer = ref()
const cz = qurl()
const partition = ref()
const bodyRowd = ref([])
const rowHeight = ref(0)
const titleBox = ref(null) // 标题
const writTablethead = ref(null) // 页头栏目
const mainBody = ref() // 正文
const footerBar = ref() // 页尾
const conbstSumUp = ref() // 总结
const firstLine = ref()
const showModal = ref(false)
const showModaler = ref(false)
const imgListe = ref([])
const qainge = ref()
const templateTtpe = ref(cz.templateTtpe)
const isload = ref(false)
const tbodyloading = ref(false)
const showModalsan = ref(true)
const isbj = ref(false)
const initDta = async () => {
    const { data }: any = await dxget("huli/hltemplateList", { id: cz.templateId })
    partition.value = JSON.parse(data.partition)
    partition.value.map(a => {
        if (a.type == 0) {
            titleBox.value = a
        }
        if (a.type == 1) {
            writTablethead.value = a
        }
        if (a.type == 2) {
            a.initData.map(na => {
                if (na.textType == '1' || na.textType == '2') {
                    na.val = null
                }
            })
            bodyRowd.value = [a]
            firstLine.value = JSON.parse(JSON.stringify(a))
            rowHeight.value = a.initData[0].h
        }
        if (a.type == 3) {
            footerBar.value = a
        }
        if (a.type == 4) {
            conbstSumUp.value = a
        }
    })
    if (cz.id) {
        isbj.value = true
        gettemplate()
    }

}
initDta()
const addRow = () => {
    const jbhae = JSON.parse(JSON.stringify(firstLine.value))
    console.log(jbhae);
    jbhae.initData.map(a => {
        a.val = null
    })
    bodyRowd.value.unshift(jbhae)
}
// 获取签名
const getImg = async () => {
    let { data }: any = await dxget("public/getImg", {
        Prefix: localStorage.userNmae + 'qm',
    });
    imgListe.value = data
}

getImg()
// 上传签名
const updataImgqm = () => {
    getImg()
    showModal.value = false;
    showModaler.value = true

}
// 删除签名
const delectImg = async (data) => {
    let { errno }: any = await dxget("public/delImg", {
        key: data.key,
    });
    if (errno == 0) {
        window.$message.success("删除成功！");
        getImg();
    }
}
const uppupqm = (data) => {
    showModaler.value = true
    qainge.value = data
}
const xzpupcall = (data) => {
    qainge.value.val = data.url
    showModaler.value = false
}
const delrow = (idx) => {
    bodyRowd.value.splice(idx, 1)
}

const baocun = async () => {
    let lkheer = "post"
    const obj = {
        titleBox: JSON.stringify(titleBox.value),
        writTablethead: JSON.stringify(writTablethead.value),
        bodyRowd: JSON.stringify(bodyRowd.value),
        footerBar: JSON.stringify(footerBar.value),
        conbstSumUp: JSON.stringify(conbstSumUp.value)
    }
    if (cz.id) {
        lkheer = "put"
        obj['id'] = cz.id
    } else {
        obj["name"] = cz.name
        obj['templateId'] = cz.templateId
        obj['templateTtpe'] = cz.templateTtpe
    }
    isload.value = true
    const res = await dxpost('huli/hlhzinfo', obj, lkheer)
    console.log(res);
    isload.value = false
    callBack()
    window.$message.success("操作成功")
}
const gettemplate = async () => {
    tbodyloading.value = true
    const { data }: any = await dxget('huli/hlhzinfo', { id: cz.id })
    tbodyloading.value = false
    console.log(data);
    if (data.titleBox) {
        titleBox.value = JSON.parse(data.titleBox)
    }
    if (data.writTablethead) {
        writTablethead.value = JSON.parse(data.writTablethead)
    }
    if (data.bodyRowd) {
        bodyRowd.value = JSON.parse(data.bodyRowd)
    }
    if (data.footerBar) {
        footerBar.value = JSON.parse(data.footerBar)
    }
    if (data.conbstSumUp) {
        conbstSumUp.value = JSON.parse(data.conbstSumUp)
    }


}
// 打印
const daying = () => {
    Print(daykkjer.value)
}

</script>
<style scoped>
.addpatient-page {
    background: #fff;
    width: 910px;
    min-height: 400px;
}

.writTable {
    padding: 0;

}

.writTablethead {}

.tbodycentext {
    position: relative;
}

.theadcentext {
    position: relative;
}

.titlecenter {
    position: relative;
    overflow: hidden;
}

.textcontext {
    position: absolute;
}

.kjnmkjser {
    border: 0;
    resize: none;
    position: absolute;
    overflow: hidden;
}

.writTabletbody {
    position: relative;
    top: -2px;
}

.signatureBox {}

.kjnkjsertwer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
}

.SelectTheSignature {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px
}

.lisyuhghnuwe {
    border: 1px solid #e0e0e0;
    height: 45px;
    background: #f8f8f8;
    position: relative;
}

.lisyuhghnuwe img {
    width: 100%;
    height: 100%;
}

.sdfsdfdsrtt {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 20px;
    display: none;
}

.lisyuhghnuwe:hover .sdfsdfdsrtt {
    display: block;
}

.dfsdtrteer {
    position: absolute;
    right: -20px;
    top: 2px;
    font-size: 20px;
    display: none;
}

.tbodycentext:hover .dfsdtrteer {
    display: block;
    cursor: pointer;
}
</style>